<script setup lang="ts">
import type { VxeGridProps } from 'vxe-table'

import { useGetSupplierListOfProject } from '@fl/api/purchase'
import { SearchTable } from '@fl/components'
import { treeFindLabel } from '@fl/utils/tree'
import { cloneDeep } from 'lodash-es'

import AddSupplier from './components/add-supplier.vue'
import { QUOTE_STATUS, QUOTE_STATUS_OPTIONS } from './constant'

const router = useRouter()
const route = useRoute()

const projectId = route.query.projectId as string
const projectName = route.query.projectName as string

const showAddSupplier = ref<boolean>(false)

const { data: supplierListData, isLoading: isGetSupplierListOfProjectLoading } = useGetSupplierListOfProject(projectId)

// #region Supplier Table
const isTableLoading = computed(() => isGetSupplierListOfProjectLoading.value)
const tableData = ref<any[]>([{}])

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { field: 'supplierName', title: '供应商名称' },
        { field: 'status', slots: { default: 'status' }, title: '状态' },
        { field: 'totalPrice', slots: { default: 'total_price' }, title: '报价' },
        { slots: { default: 'operation' }, title: '操作', width: 100 },
    ],
    headerRowClassName: 'text-[#86909C] text-[14px]',
    height: undefined,
})

watchEffect(() => {
    tableData.value = cloneDeep(supplierListData.value)
})
// #endregion
// #region UI Listener
function onAddBtnClick() {
    showAddSupplier.value = true
}

function onCheckDetailBtnClick(row: any) {
    router.push({ path: '/purchase-pages/pricing-tool/project-price-list', query: { projectId, supplierId: row.supplierId } })
}

function onBackBtnClick() {
    router.back()
}
// #endregion
</script>

<template>
    <el-container class="h-full">
        <el-main class="bg-white">
            <el-row>
                <el-col :span="24">
                    <el-button type="primary"
                               @click="onAddBtnClick"
                    >
                        <div class="i-ic:baseline-add size-16" />
                        新增供应商
                    </el-button>
                </el-col>

                <el-col :span="24"
                        class="mt-20"
                >
                    <div class="w-full">
                        <SearchTable v-bind="gridOptions"
                                     :loading="isTableLoading"
                                     :data="tableData"
                        >
                            <template #status="{ row }">
                                <span class="px-8 inline-block border-1 rounded-[3px] border-solid text-[12px]"
                                      :class="row.status === QUOTE_STATUS.HAS_QUOTED ? ['bg-[#E3F9E9]', 'border-[#2BA471]', 'text-[#2BA471]'] : ['bg-[#FFF1E9]', 'border-[#E37318]', 'text-[#E37318]']"
                                >
                                    {{ treeFindLabel({ targetValue: row.status, treeData: QUOTE_STATUS_OPTIONS }) }}
                                </span>
                            </template>

                            <template #total_price="{ row }">
                                <span>{{ row.status === QUOTE_STATUS.HAS_QUOTED ? `${row.totalPrice}元` : '-' }}</span>
                            </template>

                            <template #operation="{ row }">
                                <el-button text
                                           type="primary"
                                           class="!p-4"
                                           :disabled="row.status === QUOTE_STATUS.HAS_NOT_QUOTED"
                                           @click="onCheckDetailBtnClick(row)"
                                >
                                    查看
                                </el-button>
                            </template>
                        </SearchTable>
                    </div>
                </el-col>

                <el-col :span="24"
                        class="mt-50 justify-center !flex"
                >
                    <el-button @click="onBackBtnClick">
                        返回
                    </el-button>
                </el-col>
            </el-row>
        </el-main>
    </el-container>

    <AddSupplier v-model:visible="showAddSupplier"
                 :project-id="projectId"
                 :project-name="projectName"
    />
</template>

<style scoped lang="scss">
:deep(.vxe-table--body-wrapper) {
    min-height: 48px !important;
}
:deep(.vxe-grid--toolbar-wrapper) {
    display: none;
}
</style>
